<template>
  <div className="box-border p-2 h-full relative">
    <!-- 顶部 -->
    <div className="w-full text-center">
      <div className="absolute" @click="router.go(-1);">取消</div>
      <span>添加好友</span>
    </div>
    <!-- 顶部 -->
    <!-- 用户信息 -->
    <div
      className="w-full h-[20vh] flex px-[2vw] py-[1vh] box-border justify-between *:flex *:items-center"
    >
      <div className="basis-1/4 flex items-center">
        <v-avatar :image="user?.avatar" size="60"></v-avatar>
      </div>
      <div className="basis-3/4">
        <div>
          <div>
            <span className="text-xl">{{ user?.username }}</span>
          </div>
          <div>
            <span>{{ sexMap.get(user?.sex) }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 用户信息 -->
    <!-- 验证信息 -->
    <div>填写验证信息：</div>
    <v-text-field variant="solo" v-model="msg" />
    <!-- 验证信息 -->
  </div>
  <div className="absolute bottom-5 w-full px-2">
    <v-btn block @click="sendApply"> 发送 </v-btn>
  </div>
</template>
<script lang="ts" setup>
import { getUserInfoById, sendUserApply } from "@/api";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { sexMap } from "@/utils/commonType";
import { useUserInfoStore } from "@/store/userInfo";

const router = useRouter();
const userInfoStore = useUserInfoStore();
const route = useRoute();
const user = ref();
const msg = ref("");


const sendApply = async () => {
  sendUserApply({
    uid: Number(userInfoStore.user.id),
    type: 1,
    targetId: user.value.id,
    msg: msg.value,
    status: 1,
    readStatus: 1,
  }).then(() => {
    router.go(-1);
  });
};

onMounted(async () => {
  user.value = await getUserInfoById(Number(route.query.uid));
});
</script>
